<template>
	<view>
		<view class="item" v-for="(item,index) in list" :key="index" @click="showItem(item)">
			<view class="title">
				<u-icon name="bell-fill" color="#EF682C" size="36"></u-icon>
				<text class="t1">{{item.title}}</text>
				
				<view class="dot" style="transform: rotate(90deg);" @click.stop="showMore(item)">
					<u-icon name="more-dot-fill" size="34" color="#555"></u-icon>
				</view>
			</view>
			<view class="message u-line-2">{{item.content}}</view>
			<view class="date">{{item.createTime || item.create_time || item.createtime}}</view>
		</view>
		
		<u-popup v-model="show" mode="center" border-radius="20" closeable>
			<view class="pop-content">
				<view class="title">{{item.title}}</view>
				<scroll-view scroll-y="true" style="height: 500rpx;">
					<view class="nr">{{item.content}}</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				list:'',
				status:'loading',
				show:!1,
				item:''
			}
		},
		methods: {
			getList(){
				this.status = 'loading'
				this.$u.api.message({
					page:this.page,
					limit:10,
				}).then(res=>{
					this.list = this.page == 1 ? res : this.list.concat(res)
					this.status = res.length  === 10 ? 'loadmore' : 'nomore'
					uni.stopPullDownRefresh()
				})
			},
			showItem(item){
				this.item = item
				this.show = !0
			},
			showMore(item){
				uni.showActionSheet({
					itemList:['删除','删除全部'],
					success: (res) => {
						let index = res.tapIndex
						let data = {}
						if(index === 0){
							data.message_id = item.id
						}
						this.$u.api.clearMessage(data).then(res=>{
							this.page = 1
							this.getList()
						})
					}
				})
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if(this.status == 'loadmore'){
				this.page ++
				this.getList()
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList()
		}
	}
</script>

<style lang="scss">
	page{background-color: #F1F1F1;}
	.item{
		margin: 20rpx 50rpx 0;background-color: #fff;border-radius: 20rpx;padding: 20rpx;
		.title{
			vertical-align: middle;word-break: break-all;border-bottom: 1rpx solid #ddd;padding-bottom: 15rpx;position: relative;text-align: justify;padding-right: 48rpx;
			.t1{font-weight: bold;font-size: 28rpx;padding-left: 10rpx;}
			.dot{position: absolute;right: 0;top: 0;}
		}
		.message{word-break: break-all;text-align: justify;margin: 15rpx 0;}
		.date{color: #666;font-size: 26rpx;}
	}
	
	.pop-content{
		.title{text-align: center;font-weight: bold;padding: 20rpx 0;}
		width: 640rpx;
		padding-bottom: 30rpx;
		.nr{padding: 0 30rpx;text-align: justify;word-break: break-all;}
	}
</style>

